<template>
  <div class="center-container" ref="containers"  @mousemove="handleMouseMove">
    <div class="container" ref="container">
        <h1>登录</h1>
        <div class="ipt-box">
            <input type="text" placeholder="账号" autocomplete="off" v-model="username">
        </div>
        <div class="ipt-box">
            <input :type="passwordType" id="password" placeholder="密码" autocomplete="off" v-model="pwd" 
            ref="passwordInput">
            <i ref="eye" class="eye fa fa-eye-slash"  @click="togglePasswordVisibility"></i>
            <div class="beam" ref="beam" :style="beamStyle"></div>
        </div>
        <button class="btn-login" @click="checkOut">登录</button>
    </div>
  </div>



</template>


<style scoped>
@import url(https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css);

.center-container {
    /* 100%窗口宽高 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fefefe;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 弄两个圆点缀一下背景 */
.center-container::before,
.center-container::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.center-container::before{
    width: 30vh;
    height: 30vh;
    background-color: #7875ac40;
    top: 10vh;
    left: -10vh;
}
.center-container::after{
    width: 60vh;
    height: 60vh;
    background-color: #7875ac20;
    bottom: -15vh;
    right: -15vh;
}

/* 登录框 */
.container{
    position: relative;
    z-index: 1;
    width: 500px;
    height: 450px;
    background-color: #fff;
    box-shadow: 0 8px 50px rgba(0,0,0,0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1{
    font-size: 40px;
    width: 75%;
    letter-spacing: 10px;
    margin-bottom: 30px;
}
.ipt-box{
    width: 75%;
    margin: 10px 0;
    border-radius: 5px;
    position: relative;
    z-index: 2;
}
.ipt-box input{
    width: 92%;
    font-size: 16px;
    padding: 15px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    outline: none;
    background: none;
    position: relative;
    z-index: 2;
}
/* 接下来去除密码框自带的小眼睛 */
.ipt-box input[type="password"]::-ms-reveal,
.ipt-box input[type="password"]::-ms-clear{
    display: none;
}
/* 密码框小眼睛 */
.ipt-box .eye{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
}
/* 登录按钮 */
.btn-login{
    width: 75%;
    height: 50px;
    margin-top: 30px;
    border: none;
    outline: none;
    background-color: #7875ac;
    color: #fff;
    border-radius: 5px;
    font-size: 18px;
    letter-spacing: 8px;
    text-indent: 8px;
    cursor: pointer;
}
/* 灯光照射 */
.beam{
    width: 100vw;
    height: 25vw;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 30px;
    /* 绘制三角形 */
    clip-path: polygon(100% 50%,100% 50%,0 0,0 100%);
    /* --beam-deg为CSS的自定义属性，这里用作设置灯光的角度，这个值在js中会进行计算 */
    /* transform: translateY(-50%) rotate(var(--beam-deg,0)); */
    /* 设置旋转基点 */
    /* transform-origin: 100% 50%; */
    /* 设置过渡 */
    /* transition: transform 0.2s ease-out; */
}

/* 接下来是打开密码灯后的样式变化 */
.show-password{
    background-color: #000;
}
.show-password::before,
.show-password::after{
    display: none;
}
.show-password .container{
    background-color: rgba(255,255,255,0.05);
    box-shadow: 0 8px 50px rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.15);
}
.show-password h1{
    color: #fff;
}
.show-password .ipt-box{
    border: 1px solid rgba(255,255,255,0.5);
}
.show-password input{
    color: #fff;
    border: 1px solid #000;
}
.show-password #password{
    color: #000;
}
.show-password .beam{
    /* background-color: yellow; */
    /* background-image: linear-gradient(to left, yellow, orange 50%, red); */
    background-image: linear-gradient(to left, yellow, transparent);
}
.show-password .btn-login{
    background-color: #fff;
    color: #000;
}
.show-password .eye{
    color: #fff;
}
</style>

<script setup>
import {ref,reactive,onMounted, onUnmounted, computed} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';

const router = useRouter();
// 定义响应式变量来存储beam的角度
const beamDeg = ref(0);

// 使用ref创建DOM元素的引用
const beam = ref(null);
const eye = ref(null);
const passwordInput = ref(null);
const containers = ref(null)
const container = ref(null)

// 鼠标移动事件处理函数
const handleMouseMove = (e) => {
  const rect = beam.value.getBoundingClientRect();
  const mouseX = rect.right + (rect.width / 2);
  const mouseY = rect.top + (rect.height / 2);
  const rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY);
  const deg = (rad * (20 / Math.PI) * -1) - 350;
  beamDeg.value = deg;
};

// 密码灯旋转
const beamStyle = computed(() => {
  return {
    transform: `translateY(-50%) rotate(${beamDeg.value}deg)`,
    transformOrigin: '100% 50%',
    transition: 'transform 0.2s ease-out'
  };
});


// 密码框类型
const passwordType = ref('password');


// 为密码框小眼睛绑定点击事件
const togglePasswordVisibility = () => {
  containers.value.classList.toggle('show-password')
  container.value.classList.toggle('show-password')
  
  passwordType.value = passwordType.value === 'password' ? 'text' : 'password';
  eye.value.classList.toggle('fa-eye-slash');
  eye.value.classList.toggle('fa-eye');
  passwordInput.value.focus();
  
};

// 与后端交互
const username = ref()
const pwd = ref()

const checkOut = async ()=>{
    if(username.value==null||pwd.value==null){
        return alert('账号密码不能为空！请重新输入！')
    }
  const json = {
    'username': username.value,
    'password':pwd.value
  }
  try{
    console.log(json)
    const response = await axios.post('http://localhost:8081/login',json,
      {
        headers:{
            'Content-Type': 'application/json'
        }
      }
    )
    // console.log('响应：',response.data)
    // alert(response.data)

    if(response.data.code==200 && pwd.value===username.value){
        router.push('/modifyPwd')
        console.log(response.data)
    }
    else if(response.data.code==200){
        router.push('/index')
        console.log(response.data)
    }
    else{
        router.push('/login')
        alert(response.data.data)
        // alert("账号密码错误！请重新输入！")
        // console.log(response.data)
    }
  }
  catch(error){
    console.log('发送数据时出错：',error)
  }
}

</script>






